<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
		}

		body {
			display: flex;
		}

		.g-triangle {
			position: relative;
			margin: auto;
			width: 1px;
			height: 1px;
			padding-top: 300px;
			-webkit-animation: change 10s infinite linear;
			animation: change 10s infinite linear;
		}

		.g-triangle::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			border: 60px solid transparent;
			border-left: 120px solid #f48;
			filter: url(#blur);
		}

		.g-triangle::after {
			content: "";
			position: absolute;
			top: 12px;
			left: -5px;
			width: 0;
			height: 0;
			border: 60px solid transparent;
			border-left: 120px solid #f48;
			transform: scale(0.75);
			filter: blur(8px);
		}

		.g-triangle-inset::before {
			filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blur' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 10'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#blur");
		}

		@-webkit-keyframes change {
			100% {
				filter: hue-rotate(360deg);
			}
		}

		@keyframes change {
			100% {
				filter: hue-rotate(360deg);
			}
		}
	</style>
	<body>
		<svg width="0">
			<filter id="blur" color-interpolation-filters="sRGB">
				<feGaussianBlur stdDeviation="10" />
				<feComponentTransfer>
					<feFuncA type="table" tableValues="0 0 10" />
				</feComponentTransfer>
			</filter>
		</svg>
		<div class="g-triangle"></div>
		<div class="g-triangle g-triangle-inset"></div>
		<svg width="0">
			<filter id="blur" color-interpolation-filters="sRGB">
				<feGaussianBlur stdDeviation="10" />
				<feComponentTransfer>
					<feFuncA type="table" tableValues="0 0 10" />
				</feComponentTransfer>
			</filter>
		</svg>
	</body>
</html>
